<template>
  <div class="app-container">
    <div class="image">
      <img src="@/assets/home/banner.webp" alt="" />
    </div>
    <div class="content-item">
      <div class="title">
        LEADING MARKETPLACE<br />
        FOR GAMERS
      </div>
      <div class="text">
        <p>Trade securely with gamers throughout the world.</p>

        <p>
          Bytetapper is a platform that provides a secure player-to-player
          trading experience for
        </p>
        <p>
          buyers and sellers of online gaming products. We provide a system for
          secure transactions
        </p>
        <p>
          – you do the rest. We have marketplaces for games and leading titles,
          including the
        </p>
      </div>
      <div class="right">
        <div class="pic">
          <img src="@/assets/home/pic.webp" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, computed } from "vue";

const route = useRoute();
const router = useRouter();

const scrollData = [
  {
    title: "Popular Games",
  },
  {
    title: "Popular props",
  },
  {
    title: "Free trial",
  },
];
// 跳转道具列表
const toPropsList = (item) => {
  router.push({
    path: "/propsList",
    query: { id: item },
  });
};

// 跳转游戏首页
const toGame = () => {
  router.push({
    path: "/game",
  });
};
</script>

<style lang="scss" scoped>
.app-container {
  margin-bottom: 60px;
  width: 100%;
  .image {
    width: 100%;
    height: auto;
    position: relative;
    img {
      width: 100%;
      height: auto;
    }
  }
  .content-item {
    position: absolute;
    top: 140px;
    left: 130px;
    .title {
      font-size: 61px;
      font-weight: bold;
      font-family: sans-serif;
      color: #ffffff;
      // padding-top: 65px;
    }
    .text {
      font-size: 20px;
      color: #ffffff;
      margin-top: 10px;
    }
    .right {
      display: flex;

      .pic {
        margin-top: 40px;
        margin-left: 140px;
        margin-right: 100px;
      }
      .scroll-item {
        height: 30px;
        margin: 260px auto;
        overflow: hidden;
        color: #fdfdfdcc;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>
